<template>
    <div id="shop">
        <Banner :shops='data5.shop_sign' ></Banner>
        <xiangqing :shop='data5'></xiangqing>
        <xiangqing2 :shop='data5'></xiangqing2>
        <xiangqing3 :shop='data5' :shop2='data4'></xiangqing3>
        <tabs @cc='clack'></tabs>
        <menus :shop='data2' :shop2='data3' :shop3='data5' v-show="show1"></menus>
        <evaluation  v-show="show2"></evaluation>
        <seller  v-show="show3"></seller>
    </div>
</template>
<script>
import Banner from './components/Banner'
import xiangqing from './components/xiangqing'
import xiangqing2 from './components/xiangqing2'
import xiangqing3 from './components/xiangqing3'
import evaluation from './evaluation/evaluation'
import seller from './sellers/seller'
import tabs from './tabs/tabs'
import menus from './menus/menu'
import axios from 'axios'
export default {
    data(){
        return{
            ids:'',
            data1:{},
            data2:{},
            data3:{},
            data4:{},
            data5:{},
            show1:true,
            show2:false,
            show3:false,
            // icon:false,
            // offsettop:0,
        }
    },
    components:{
        Banner,
        xiangqing,
        xiangqing2,
        xiangqing3,
        tabs,
        menus,
        evaluation,
        seller
    },
    methods:{
        clack(val){
            
            this.show1=false;
            this.show2=false;
            this.show3=false;
            switch (val) {
                case 1:
                    this.show1=true
                    break;
                case 2:
                    this.show2=true
                    break;
                case 3:
                    this.show3=true
                    break;
                default:
                    break;
            }
        },
         axios(){
            axios.get('/api/dian'+this.ids+'.json').then(this.success).catch(this.errors)
        },
        success(data){
            this.data1=JSON.parse(data.data.bought_list.body)
            this.data2=JSON.parse(data.data.menu.body)
            this.data3=JSON.parse(data.data.recommend.body)
            this.data4=JSON.parse(data.data.redpack.body)
            this.data5=JSON.parse(data.data.rst.body)
            // console.log('0',data.data)
            // console.log('1',this.data1)
            // console.log('2',this.data2)
            // console.log('3',this.data3)
            // console.log('4',this.data4)
            // console.log('5',this.data5)
            
             let reg = RegExp(/png/)
                let suffix1 = 'jpeg'
                if (reg.test(this.data5.shop_sign.image_hash)) {
                    suffix1 = 'png'
                }
                let imgpath1 = `${this.data5.shop_sign.image_hash.slice(0,1)}/${this.data5.shop_sign.image_hash.slice(1,3)}/${this.data5.shop_sign.image_hash.slice(3)}`
                 this.data5.shop_sign.image_hash = `https://fuss10.elemecdn.com/${imgpath1}.${suffix1}?imageMogr/format/webp/`
                let suffix2 = 'jpeg'
               if (reg.test(this.data5.image_path)) {
                    suffix2 = 'png'
                }
                let imgpath2 = `${this.data5.image_path.slice(0,1)}/${this.data5.image_path.slice(1,3)}/${this.data5.image_path.slice(3)}`
                 this.data5.image_path = `https://fuss10.elemecdn.com/${imgpath2}.${suffix2}?imageMogr/format/webp/`
            //    console.log(this.data5.image_path)
            
            
            let suffix3 = 'jpeg'
            this.data3.items.forEach(element => {
                if (reg.test(element.photos[0])) {
                    suffix3 = 'png'
                }
                let imgpath3 = `${element.photos[0].slice(0,1)}/${element.photos[0].slice(1,3)}/${element.photos[0].slice(3)}`
               element.photos[0] = `https://fuss10.elemecdn.com/${imgpath3}.${suffix3}?imageMogr/format/webp/thumbnail/!828x828r/gravity/Center/crop/828x828/`
            });
            

                console.log(this.data3)




                let suffix4 = 'jpeg'
            this.data2.forEach(element => {
                if(element.icon_url){
                if (reg.test(element.icon_url)) {
                    suffix4 = 'png'
                }
                let imgpath4 = `${element.icon_url.slice(0,1)}/${element.icon_url.slice(1,3)}/${element.icon_url.slice(3)}`
               element.icon_url= `https://fuss10.elemecdn.com/${imgpath4}.${suffix4}?imageMogr/format/webp/thumbnail/!828x828r/gravity/Center/crop/828x828/`
            }
            });

                let suffix5 = 'jpeg'
                this.data2.forEach(element => {
                // console.log('肖国锋',element)
               element.foods.forEach(ele => {
                    if (reg.test(ele.image_path)) {
                    suffix5 = 'png'
                }
                let imgpath5 = `${ele.image_path.slice(0,1)}/${ele.image_path.slice(1,3)}/${ele.image_path.slice(3)}`
                ele.image_path= `https://fuss10.elemecdn.com/${imgpath5}.${suffix5}?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/`
                });
            });






        },
        errors(err){
            console.log(err)
        },
    },
    mounted() {
        this.ids=this.$route.params.id
        this.axios()

    },
}
</script>
<style lang="stylus" scoped>
    #shop
        width 100%
</style>

